<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>04_ajax_省市区二级联动</h2>
        <div>
            <select class="province">
                <!-- <option value="">请选择省份</option> -->
                <!-- <option value="A001">北京</option>
                <option value="A002">上海</option>
                <option value="A003">湖北</option>
                <option value="A004">湖南</option> -->
            </select>

            <select class="city">
                <!-- <option value="">请选择市/区</option> -->
                <!-- <option value="A00101">朝阳</option>
                <option value="A00102">海淀</option>
                <option value="A00103">上地</option>
                <option value="A00104">沙河</option> -->
            </select>
        </div>
    </div>

    <script>
        //   1. 请求数据
        //   2. 根据数据 渲染省份  出现省份的下拉框 
        //   3. onChange 切换省份的时候  出现省份对应的  城市列表    作业 
        
        var  proBox  = document.getElementsByClassName('province')[0]
        var  cityBox  = document.getElementsByClassName('city')[0]
        
        // ajax 
        var xhr = new XMLHttpRequest()      
        xhr.open("get","../data/pro.json",true)
        xhr.send()

        xhr.onreadystatechange =function(){
            if(xhr.readyState==4 && xhr.status ==200){
                var result = JSON.parse(xhr.responseText)
                console.log(result)

                var { list:prolist } = result;
                console.log(prolist)

                // var html = ""
                // prolist.forEach((item,inedx)=>{
                //     var {city_id,city_name } = item ;
                //     html+= `<option value="${city_id}"> ${city_name } </option>`
                // })
                // console.log(html)
                // proBox.innerHTML = html;

                // 参数也可以解构取值 
                // 如果参数接收是一个对象  直接对参数进行解构 
                // 外双内单   外单内双 
                var html  = "<option value=''>请选择省份</option>";
                prolist.forEach(({city_id,city_name})=>{
                    html += `<option value="${city_id}"> ${city_name}</option> `
                })
                proBox.innerHTML = html;

                // 绑定点击事件 onChange
                proBox.onchange = function(){
                    console.log(this.value)   // select 选择的 value 值 
                    var city_id = this.value 
                    if(city_id){   // 有 city_id => 省份 => 生成二级城市 
                        // 通过 city_id 去 prolist 去查找 得到 list 
                        var thisObj = prolist.filter(item=>item.city_id==city_id)   // 查找某一项
                        console.log(thisObj)

                        var {list:cityList} = thisObj[0];
                        console.log(cityList)
                        var html = '<option value="">请选择市/区</option>';
                        cityList.forEach(({city_id,city_name})=>{
                            // var {city_id,city_name } = item ;
                            html += "<option value="+city_id+"> "+city_name+"</option>"
                        })

                        cityBox.innerHTML = html;

                        
                    }else{
                        console.log("没有选择实际的省份---默认")
                        cityBox.innerHTML = '<option value="">请选择市/区</option>'
                    }
                }
            }
        }
    </script>
</body>
</html>